//import goFishingIcon from '../../assets/images/go-fishing.png';

export interface MapHandler {
  display(): void
  auto(): Boolean
  setData(data: any): void
  name: string
  type: string
  description?: string
  active: boolean
  activate(): void
  deactivate(): void
  onComplete?: (data: any) => void
}

export default abstract class BaseMapHandler implements MapHandler {
  name: string
  type: string
  description?: string
  active: boolean
  data: any = null
  constructor() {
    this.name = ''
    this.type = ''
    this.description = ''
    this.active = false
  }
  display(): void {
    if (this.auto()) {
      this.activate()
    }
  }
  auto(): Boolean {
    return false

  }
  setData(data: any): void {
    this.data = data
  }
  activate(): void {
    this.active = true
  }
  deactivate(): void {
    this.active = false
    this.data = null
  }

  createMarker(map: any, point: { lat: number, lng: number }, title: string) {
    const qq = (window as any).qq;
    if (!qq || !qq.maps || !map || !point?.lat || !point?.lng) {
      console.error('创建标记失败：缺少必要参数或腾讯地图API未加载');
      return null;
    }

    const marker = new qq.maps.Marker({
      position: new qq.maps.LatLng(point.lat, point.lng),
      map: map,
      title: title,
      icon: {
        //url: goFishingIcon,
        size: new qq.maps.Size(25, 40),
        anchor: new qq.maps.Point(12.5, 40)
      }
    });
    return marker;
  }

  createInfoWindow(
    map: any,
    point: { lat: number; lng: number },
    title: string,
    style?: {
      bgColor?: string;    // 背景色
      padding?: string;    // 内边距
      fontSize?: string;   // 字体大小
      maxWidth?: string;   // 最大宽度（避免内容过长）
    }
  ) {
    const qq = (window as any).qq;
    if (!qq || !qq.maps || !map || !point?.lat || !point?.lng || !title) {
      console.error('创建信息窗口失败：缺少必要参数或腾讯地图API未加载');
      return null;
    }

    const defaultStyle = {
      bgColor: '#fff',
      padding: '6px 1px',
      fontSize: '14px',
      maxWidth: '200px',
      borderRadius: '4px',
      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
      color: '#333'
    };
    const finalStyle = { ...defaultStyle, ...style };

    const content = `
    <div class="info-window1" style="
      background: ${finalStyle.bgColor};
      padding: ${finalStyle.padding};
      font-size: ${finalStyle.fontSize};
      max-width: ${finalStyle.maxWidth};
      border-radius: ${finalStyle.borderRadius};
      box-shadow: ${finalStyle.boxShadow};
      color: ${finalStyle.color};
      white-space: normal;
    ">
      ${title}
    </div>
  `;

    const infoWindow = new qq.maps.InfoWindow({
      position: new qq.maps.LatLng(point.lat, point.lng),
      content: content,
      map: map,
      disableAutoPan: false,
      visible: true,
      showClose: false
    });

    qq.maps.event.addListener(map, 'click', () => {
      if (infoWindow) {
        infoWindow.open(map);
      }
    });

    qq.maps.event.addListener(map, 'dblclick', () => {
      if (infoWindow) {
        infoWindow.open(map);
      }
    });

    return infoWindow;
  }

  createLabel(map: any,
    point: { lat: number; lng: number },
    title: string) {
    const qq = (window as any).qq
    try {
      return new qq.maps.Label({
        position: new qq.maps.LatLng(point.lat, point.lng),
        content: title,
        map: map,
        offset: new qq.maps.Size(20, 30),
        style: {
          color: "#3777FF", // 文字颜色
          fontSize: "16px", // 字体大小
          fontWeight: "bold", // 字体加粗
          padding: "2px 8px", // 内边距（避免文字过挤）
          whiteSpace: "nowrap", // 文本不换行（默认）
          border: "1px solid #3777FF",
          borderRadius: "4px",
          margin: "10px 0 0 0 ",
          cursor: 'grab'
        }
      });
    } catch (error) {
      console.error('创建标签失败：', error);
    }
  }

  createPolygon(map: any, points: Array<{ lat: number; lng: number }>) {
    const qq = (window as any).qq
    const path = points.map(p => new qq.maps.LatLng(p.lat, p.lng))
    return new qq.maps.Polygon({
      path: path,
      strokeColor: '#FF0000',
      strokeWeight: 3,
      map: map
    })
  }

  createPolyline(map: any, points: Array<{ lat: number; lng: number }>) {
    const qq = (window as any).qq
    const path = points.map(p => new qq.maps.LatLng(p.lat, p.lng))
    return new qq.maps.Polyline({
      path: path,
      strokeColor: '#FF0000',
      strokeWeight: 3,
      map: map
    })
  }
}